<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>谭木匠</title>
    <meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">

  </head>
  <body>
          <div id="Loading">
          <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div style="display: none;" id="loadingText" class="loading">loading 0%</div>
        </div>
        <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    window.onload =  function load() {
      var a= setTimeout("document.getElementById('Loading').style.transition='opacity 0.3s'",0)
      //设置透明度改变的过渡时间为0.3秒
      var b= setTimeout("document.getElementById('Loading').style.opacity=0",500)
      //0.5秒后加载动画开始变为透明
      var c= setTimeout("document.getElementById('Loading').style.display='none'",800)
      // 生成随机数
      function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
      }
      //跑进度
      let count = 0
      let timeout = random(1, 2)
      setTimeout(() => {
        count += random(1, 5)
        if (count > 98) {
          count = 98
        }
        document.getElementById("loadingText").innerText = 'laoding' + count +'%'
        if (document.readyState == "complete") {
          count = 100
          document.getElementById("loadingText").innerText = 'laoding' + count +'%'
          setTimeout("document.getElementById('Loading').style.display='none'",10)
          return
        }

      }, timeout)
    }

  </script>
  <style type="text/css">
  body{
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFF;
  }
  .loading{
      position: absolute;
      bottom: 1.5rem;
      font-size: .3rem;
      color: #666;
      width: 2rem;
      left: 50%;
      margin-left: -1rem;
    }
    #Loading {
      top:75%;
      left:50%;
      position: absolute;
      -webkit-transform: translateY(-50%)  translateX(-50%);
      transform: translateY(-50%)  translateX(-50%);
      z-index:100;
    }
    @-webkit-keyframes ball-beat {
      50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75); }

      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1); } }

    @keyframes ball-beat {
      50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75); }

      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1); } }

    .ball-beat > div {
      background-color: #666;
      width: .25rem;
      height: .25rem;
      border-radius: 100% !important;
      margin: .02rem;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      display: inline-block;
      -webkit-animation: ball-beat 0.7s 0s infinite linear;
      animation: ball-beat 0.7s 0s infinite linear; }
    .ball-beat > div:nth-child(2n-1) {
      -webkit-animation-delay: 0.35s !important;
      animation-delay: 0.35s !important; }
  </style>
  <!-- <script src="./src/lib/swiper.animate1.0.3.min.js"></script> -->
</html>
